<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <title>CSS Houdini Progress Demo By Yisi</title>
</head>

<body>
  <input type="checkbox" name="check1" id="check1">
  <label for="check1">Pie</label>

  <main>
    <div class="box">
      <div class="progress" id="progress">CSS Houdini Demo</div>
    </div>

    <div class="box">
      <div class="line">CSS Houdini Demo</div>
    </div>
  </main>

  <style>

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: arial, sans-serif;
  }

  main {
    display: flex;
    margin-top: 30px;
  }

  .box {
    width: 300px;
    height: 300px;
    margin-right: 30px;
    overflow: hidden;
    resize: both;
    border: 3px dashed #999;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
  }

  .box > div {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.6);
    transition: color .3s, font-size 1s;
  }

  .line {
    background-image: paint(line);
    --line-color: green;
    --line-width: 1px;
    --line-style: "to left bottom";
  }

  .progress {
    cursor: pointer;
    color: green;

    /*
     * --*-color
     * 取值：<color>
     * 默认值(不设置时): rgba(0,0,0,0) 透明
     * 不支持 Color Name，例如 red (Chrome bug)
     */
    --track-color: rgba(222, 222, 222, .8);
    --stroke-color: rgba(71, 173, 228, 1);
    --fill-color: rgba(0, 234, 30, 0.2);

    /*
     * --stroke-style
     * 描边样式
     * 取值：butt | round | square，支持单引号或者双引号
     * 默认值(不设置时): round
     */
    --stroke-style: butt; /* 或者 'butt' */
    /*
     * --stroke-width
     * 描边宽度
     * 取值：px / %
     * % 相对于圆的半径, 100% 时变为饼状
     */
    --stroke-width: 20%;
    /*
     * --stroke-rotate
     * 描边旋转角度
     * 取值：deg
     * 默认值(不设置时): 0deg
     */
    --stroke-rotate: 0deg;

    /*
     * progress
     * --percentage
     * 进度
     * 取值：%
     * % 相对于圆周
     */
    --percentage: 30%;
    background-image: paint(progress);
  }

  label {
    cursor: pointer;
    font-size: 22px;
    user-select: none;
  }

  #check1:checked ~  main .progress {
    --stroke-width: 100%;
    --percentage: 60%;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
  }

  </style>
  <script>
    // document.registerProperty({name: '--stroke-color', syntax: '<color>'});
    CSS.paintWorklet.addModule('paintworklet.js');

    window.$ = document.querySelector.bind(document);
    window.requestAnimationFrame = window.requestAnimationFrame ||
                                   window.mozRequestAnimationFrame ||
                                   window.webkitRequestAnimationFrame ||
                                   window.msRequestAnimationFrame;

    const ele = $('#progress');
    const progressValue = parseFloat(window.getComputedStyle(ele, null).getPropertyValue("--percentage").replace(/%/g, ''));
    let progress = 0;

    function step() {
      progress += 1;
      ele.style.cssText = `--percentage: ${progress}%;font-size: 36px;`;
      ele.innerText = `${progress}%`;
      if (progress < 100) {
        requestAnimationFrame(step);
      }
      if (progress > 80){
        ele.style.cssText = `--percentage: ${progress}%;font-size: 36px;color: #ea192e;`;
      }
    }

    // requestAnimationFrame(step);
    ele.addEventListener('click', evt => {
      console.log(typeof progressValue, progressValue)
      progress = progressValue;
      requestAnimationFrame(step);
    })
  </script>
</body>

</html>
